<template>
  <div>
    <el-table
      v-loading="tableLoading"
      :data="dailyPlanData"
      :default-sort="{prop: 'generateTime', order: 'descending'}"
    >
      <el-table-column label="道路编号" align="center" sortable prop="roadID" />
      <el-table-column label="道路名称" align="center" prop="roadName" />
      <el-table-column label="生成时间" align="center" sortable prop="generateTime" />
      <el-table-column label="检测时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.dailyInspectEnrollDate? toTimeString(row.dailyInspectEnrollDate) : '暂无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="检测情况" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.inspectorID ? 'success': 'danger'">{{ row.inspectorID? '已检测' : '未检测' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="检测人" align="center">
        <template slot-scope="{row}">
          <span>{{ row.inspectorID? row.inspectorID: '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="140" fixed="right" label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" size="small" :disabled="!!!row.inspectorID" icon="el-icon-edit" circle @click="updateInspection(row.dailyInspecteID, row.roadName)" />
          <el-popconfirm
            v-if="roles[0]==='1'"
            title="该操作不可逆确定删除？"
            @onConfirm="deleteInspection(row.dailyInspecteID)"
          >
            <el-button slot="reference" size="small" type="danger" icon="el-icon-delete" circle />
          </el-popconfirm>
          <el-button type="info" size="small" icon="el-icon-more" circle @click="moreInspection(row.dailyInspecteID, row.roadName)" />
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="editDialog.title"
      width="40%"
      :visible.sync="editDialog.editDialogVisible"
      @closed="editDialogClose"
    >
      <el-form :inline="true" label-width="100px" :model="editDialog.data">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="车行道ID:">
              <span>{{ editDialog.data.roadwayID }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="道路名称:">
              <span>{{ editDialog.data.roadName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="日常检测号:">
              <span>{{ editDialog.data.dailyInspecteID }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生成时间:">
              <span>{{ toTimeString(editDialog.data.dailyInspecteDate) }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="检测状态:">
              <el-tag :type="editDialog.data.tagStatus">{{ editDialog.data.status }}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="损坏类型:">
              <span>{{ editDialog.data.damageTypeName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="检测人:">
              <span>{{ editDialog.data.userName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测人ID:">
              <span>{{ editDialog.data.inspectorID }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="损坏描述:">
            <span v-if="!editDialog.allowEdit">{{ editDialog.data.damageDesciption }}</span>
            <el-input v-else v-model="editDialog.data.damageDesciption" autosize type="textarea" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注:">
              <span v-if="!editDialog.allowEdit">{{ editDialog.data.remarks }}</span>
              <el-input v-else v-model="editDialog.data.remarks" autosize type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span v-if="editDialog.allowEdit" slot="footer">
        <el-button @click="editDialog.editDialogVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="modify">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { dailyInspectionPlan, deleteDailyInspection, searchDailyInspection, updateDailyInspection } from '@/api/dailyInspection'
import { toTimeString } from '@/utils/time-handle'

export default {
  name: 'InspectionPlanTable',
  data() {
    return {
      tableLoading: true,
      editDialog: {
        title: '详细信息',
        editDialogVisible: false,
        allowEdit: false,
        data: {}
      },
      dailyPlanData: [],
      loading: false
    }
  },
  computed: {
    ...mapGetters([
      'departmentId',
      'superDepartmentId',
      'roles'
    ])
  },
  created() {
    this.getDailyPlan()
  },
  methods: {
    toTimeString,
    deleteInspection(id) {
      deleteDailyInspection({ id }).then(() => {
        this.getDailyPlan()
        this.$message.success('删除成功')
        this.$notify.warning({
          title: '警告',
          message: '您刚刚删除了一条无法恢复的记录',
          duration: 0
        })
      })
    },
    modify() {
      this.loading = true
      this.editDialog.data.dailyInspecteDate = ''
      this.editDialog.data.damageDescription = this.editDialog.data.damageDesciption
      updateDailyInspection(this.editDialog.data).then(() => {
        this.$message.success('修改成功')
        this.editDialog.editDialogVisible = false
      })
    },
    editDialogClose() {
      this.editDialog.allowEdit = false
      this.editDialog.title = '详细信息'
      this.editDialog.editDialogVisible = false
    },
    updateInspection(id, roadName) {
      const params = { id }
      searchDailyInspection(params).then(data => {
        this.editDialog.data = data[0]
        this.editDialog.data.roadName = roadName
        if (this.editDialog.data.inspectorID) {
          this.editDialog.data.status = '已检测'
          this.editDialog.data.tagStatus = 'success'
        } else {
          this.editDialog.data.status = '未检测'
          this.editDialog.data.tagStatus = 'danger'
        }
        this.editDialog.allowEdit = true
        this.editDialog.editDialogVisible = true
      })
    },
    moreInspection(id, roadName) {
      const params = { id }
      searchDailyInspection(params).then(data => {
        this.editDialog.data = data[0]
        this.editDialog.data.roadName = roadName
        if (this.editDialog.data.inspectorID) {
          this.editDialog.data.status = '已检测'
          this.editDialog.data.tagStatus = 'success'
        } else {
          this.editDialog.data.status = '未检测'
          this.editDialog.data.tagStatus = 'danger'
        }
        this.editDialog.editDialogVisible = true
      })
    },
    getDailyPlan() {
      this.tableLoading = true
      let params = {}
      if (this.roles[0] === '2') {
        params = {
          departmentID: this.departmentId
        }
      } else {
        params = {
          departmentID: this.superDepartmentId
        }
      }
      dailyInspectionPlan(params).then(data => {
        this.dailyPlanData = data
        this.dailyPlanData.forEach(row => {
          row.generateTime = toTimeString(row.dailyInspecteDate)
        })
        setTimeout(() => {
          this.$message.success('已刷新日常巡检计划表')
          this.tableLoading = false
        }, 100)
      })
    }
  }
}
</script>

<style scoped>

</style>
